<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible" width="80%">
    <el-form :inline="true" ref="formRef" :model="formData" :rules="formRules" label-width="100px"
      v-loading="formLoading">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>基础信息</span>
          </div>
        </template>
        <el-form-item label="渠道代码" prop="channelCode">
          <el-input v-model="formData.channelCode" placeholder="请输入渠道代码" />
        </el-form-item>
        <el-form-item label="保单号" prop="policyNum">
          <el-input v-model="formData.policyNum" placeholder="请输入保单号" />
        </el-form-item>
        <el-form-item label="车牌号" prop="plateNum">
          <el-input v-model="formData.plateNum" placeholder="请输入车牌号" />
        </el-form-item>
        <el-form-item label="vin" prop="vin">
          <el-input v-model="formData.vin" placeholder="请输入vin" />
        </el-form-item>
        <el-form-item label="车主姓名" prop="ownerName">
          <el-input v-model="formData.ownerName" placeholder="请输入车主姓名" />
        </el-form-item>
        <el-form-item label="车主电话" prop="ownerPhone">
          <el-input v-model="formData.ownerPhone" placeholder="请输入车主电话" />
        </el-form-item>
        <el-form-item label="车主地址" prop="ownerAddress">
          <el-input v-model="formData.ownerAddress" placeholder="请输入车主地址" />
        </el-form-item>
        <el-form-item label="保单生效日期" prop="effectDate">
          <el-date-picker v-model="formData.effectDate" type="date" value-format="x" placeholder="选择保单生效日期" />
        </el-form-item>
        <el-form-item label="保单截止日期" prop="cutDate">
          <el-date-picker v-model="formData.cutDate" type="date" value-format="x" placeholder="选择保单截止日期" />
        </el-form-item>
      </el-card>
      <el-card style="margin-top:10px;">
        <template #header>
          <div class="card-header">
            <span>报修信息</span>
          </div>
        </template>
        <el-form-item label="安装次数" prop="installNum">
          <el-input v-model="formData.installNum" placeholder="请输入安装次数" />
        </el-form-item>
        <el-form-item label="安装详情" prop="installInfo">
          <el-input v-model="formData.installInfo" placeholder="请输入安装详情" />
        </el-form-item>
        <el-divider />
        <el-form-item label="报案时间" prop="reportDate">
          <el-date-picker v-model="formData.reportDate" type="date" value-format="x" placeholder="选择保单截止日期" />
        </el-form-item>
        <el-form-item label="报案号" prop="reportNum">
          <el-input v-model="formData.reportNum" placeholder="请输入车主电话" />
        </el-form-item>
        <el-form-item label="报案地址" prop="reportAddress">
          <el-input v-model="formData.reportAddress" placeholder="请输入车主地址" />
        </el-form-item>

        <el-form-item style="width: 100%;" label="报案详情" prop="reportInfo">
          <el-input v-model="formData.reportInfo" placeholder="请输入车主地址" />
        </el-form-item>
      </el-card>



    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { OwnerApi, OwnerVO } from '@/api/channels/owner'

/** 保单-车主信息 表单 */
defineOptions({ name: 'OwnerForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  channelCode: undefined,
  policyNum: undefined,
  plateNum: undefined,
  vin: undefined,
  amVehicleId: undefined,
  amVehicleName: undefined,
  ownerName: undefined,
  ownerPhone: undefined,
  ownerAddress: undefined,
  effectDate: undefined,
  cutDate: undefined,
  frontImg: undefined,
  tailImg: undefined,
  leftImg: undefined,
  rightImg: undefined,
  frontPlace: undefined
})
const formRules = reactive({
  policyNum: [{ required: true, message: '保单号不能为空', trigger: 'blur' }],
  plateNum: [{ required: true, message: '车牌号不能为空', trigger: 'blur' }],
  ownerName: [{ required: true, message: '车主姓名不能为空', trigger: 'blur' }],
  ownerPhone: [{ required: true, message: '车主电话不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await OwnerApi.getOwner(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as OwnerVO
    if (formType.value === 'create') {
      await OwnerApi.createOwner(data)
      message.success(t('common.createSuccess'))
    } else {
      await OwnerApi.updateOwner(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    channelCode: undefined,
    policyNum: undefined,
    plateNum: undefined,
    vin: undefined,
    amVehicleId: undefined,
    amVehicleName: undefined,
    ownerName: undefined,
    ownerPhone: undefined,
    ownerAddress: undefined,
    effectDate: undefined,
    cutDate: undefined,
    frontImg: undefined,
    tailImg: undefined,
    leftImg: undefined,
    rightImg: undefined,
    frontPlace: undefined
  }
  formRef.value?.resetFields()
}
</script>
